//
@defaultFontSize: 20px; // default font size
@defaultWidth: 500px;
@padding: 20px;
@color: #c8c8fc;

header {
  font-size: @defaultFontSize;
  width: @defaultWidth - (@padding * 2);
  background-color: #B4CCB9;
  padding: @padding;
  height: 200px;
}

a {
  &:hover { color: red; } // &은 자기자신
  &:active { color: blue; }
  text-decoration: underline;
}

section {
  width: @defaultWidth - (@padding * 2);
  padding: @padding;
}

div {
  height: 20px;
}
// 그라이데이션 효과
div:nth-child(1) { background: darken(@color, 0%); }
div:nth-child(2) { background: darken(@color, 10%); }
div:nth-child(3) { background: darken(@color, 20%); }
div:nth-child(4) { background: darken(@color, 30%); }
